<template>
  <div class="com-content">
    <!-- 面包屑 -->
    <Header :headerData="headerData" />

    <!-- 页面内容 -->
    <div class="com-sub-content">
      <div class="main-content">
        <div class="search">
          <div class="top">
            <div class="search-row" style="padding-top: 28px">
              <el-form :inline="true" :model="search" class="demo-3">
                <el-form-item label="财务报表小类">
                  <el-select v-model="search.s1" :empty-values="[null, undefined]">
                    <el-option
                      v-for="item in selectData1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="报表所属期起">
                  <el-date-picker
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择日期"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="报表所属期止">
                  <el-date-picker
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择日期"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="录入日期起">
                  <el-date-picker
                    v-model="search.date3"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择日期"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="录入日期止">
                  <el-date-picker
                    v-model="search.date4"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="请选择日期"
                    clearable
                  />
                </el-form-item>

                <el-form-item class="search-col">
                  <div class="flex-row-end search-btns">
                    <el-button @click="resetHandler">重置</el-button>
                    <el-button type="primary" @click="searchHandler">查询</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="bottom">
            <el-table
              :data="tableData"
              style="width: 100%"
              :header-cell-style="{
                color: '#333333',
                backgroundColor: '#f9fafd',
                fontWeight: 'bold',
              }"
            >
              <el-table-column label="序号" type="index" align="center" width="60" />
              <el-table-column label="财务报表种类" align="center">
                <template #default="scope">
                  <router-link
                    :to="{
                      path: '/pages/a16',
                      query: { id1: scope.row.id1, id2: scope.row.id2 },
                    }"
                    class="link-text"
                  >
                    {{ scope.row.type }}
                  </router-link>
                  <!-- <router-link
                    v-if="scope.row.table == 'balance_sheet'"
                    :to="{
                      path: '/pages/a16',
                      query: { id: scope.row.id, table: scope.row.table },
                    }"
                    class="link-text"
                  >
                    {{ scope.row.type || "-" }}
                  </router-link>
                  <router-link
                    v-if="scope.row.table == 'profit'"
                    :to="{
                      path: '/pages/a17',
                      query: { id: scope.row.id, table: scope.row.table },
                    }"
                    class="link-text"
                  >
                    {{ scope.row.type || "-" }}
                  </router-link> -->
                </template>
              </el-table-column>
              <el-table-column label="报表所属期起" align="center" width="200">
                <template #default="scope">
                  {{ scope.row.s_date || "-" }}
                </template>
              </el-table-column>
              <el-table-column label="报表所属期止" align="center" width="200">
                <template #default="scope">
                  {{ scope.row.e_date || "-" }}
                </template>
              </el-table-column>
              <el-table-column label="录入日期" align="center" width="200">
                <template #default="scope">
                  {{ scope.row.time || "-" }}
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-model:currentPage="search.pageNo"
              v-model:page-size="search.pageSize"
              :page-sizes="[10, 20, 30, 40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import Http from "@/utils/api";

const headerData = ref<any>({
  title: "财务报表信息查询",
  type: 2,
  list: [
    { title: "税务数字账户", url: "" },
    { title: "账户查询", url: "" },
  ],
});

const selectData1 = [{ value: "", label: "全部" }];

const tableData = ref<any>([]); // 列表数据
const total = ref(0); // 分页总条目
const searchHidden = ref(false); // 是否隐藏搜索条件
const search = ref<any>({
  s1: "",
  date3: "",
  date4: "",
  pageSize: 10,
  pageNo: 1,
});

// 获取table列表
function getDataList() {
  let params = {
    startTime: search.value.date3,
    endTime: search.value.date4,
  };
  Http.Get("api2", params).then((res: any) => {
    if (res.code == 1) {
      // 筛选出 table 属性为 balance_sheet 的数据
      total.value = 1;
      tableData.value = res.data.filter((item: any) => item.table === "balance_sheet");
      tableData.value[0].type = "财务报表报送与信息采集（小企业会计准则）";
      tableData.value[0].id1 = tableData.value[0].id;
      tableData.value[0].id2 = res.data.filter((item: any) => item.table === "profit")[0].id;
    }
  });
}
// 分页操作
const handleSizeChange = (val: number) => {
  search.value.pageSize = val;
  getDataList();
};
const handleCurrentChange = (val: number) => {
  search.value.pageNo = val;
  getDataList();
};
// 搜索
const searchHandler = () => {
  search.value.pageNo = 1;
  search.value.pageSize = 10;
  getDataList();
  // 缓存查询日期
  localStorage.setItem("searcha15", JSON.stringify(search.value));
};
// 重置
const resetHandler = () => {
  search.value = {};
  search.value.s1 = "";
  search.value.pageNo = 1;
  search.value.pageSize = 10;
  initDate(1);
  getDataList();
};

// 获取当前月的第一天的日期，以及当前的日期
const initDate = (tag: any) => {
  const now = new Date();
  const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);

  // 如果有缓存日期
  if (localStorage.getItem("searcha15") && !tag) {
    const searchData = JSON.parse(localStorage.getItem("searcha15") ?? "{}");
    search.value.date3 = searchData.date3;
    search.value.date4 = searchData.date4;
    return;
  }

  search.value.date3 = firstDay.toLocaleDateString("sv"); // 'sv' locale uses YYYY-MM-DD format
  search.value.date4 = now.toLocaleDateString("sv");
};

// 生命周期
onMounted(() => {
  localStorage.removeItem("searcha6");
  localStorage.removeItem("searcha14");
  initDate(0);
  getDataList();
});
</script>

<style lang="scss" scoped>
@use "./css/style";
</style>
